<template>
  <div>
    <el-row>
      <el-col :span="5"></el-col>
      <el-col :span="15" style="margin-top: 5vh">
        <span>
          <el-select v-model="page.categoryVal" class="m-2" placeholder="Select">
            <el-option
              v-for="item in page.category"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <span style="margin-left: 1vw;">
          <el-select v-model="page.isPassedVal" class="m-2" placeholder="Select">
            <el-option
              v-for="item in page.isPassed"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <el-table :data="articleList" style="width: 100%; margin-top: 2vh;">
          <el-table-column type="index" :index="index" />
          <el-table-column prop="title" label="title" width="180" />
          <el-table-column prop="updateTime" label="updateTime" width="180" />
          <el-table-column prop="category" label="category"/>
          <el-table-column prop="score" label="score"/>
          <el-table-column prop="view" label="view" />
          <el-table-column label="操作" min-width="180" header-align="center" align="center">
            <template #default="props">
              <el-button @click="view(props.row.id)" >查看</el-button >
              <el-button :type=" props.row.visible ? 'warning' : 'primary' " @click="set(props.row.id, props.row.visible)" >{{ props.row.visible ? '撤销' : '审核' }}</el-button >
              <el-button type="danger" @click="del(props.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-left: 20vw; margin-top: 2vh;"
          :currentPage="page.currentPage"
          :page-size="page.pageSize"
          layout="prev, pager, next"
          :total="page.num"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
export default {
  name: 'AdminArticle',
  components: {

  },
  data () {
    return {
      articleList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        num: 1,
        categoryVal: '',
        isPassedVal: 0,
        category: [
          {label: '全部', value: '',},
          {label: '前沿技术', value: '前沿技术',},
          {label: '每日刷题', value: '每日刷题',},
          {label: '论文解读', value: '论文解读',},
          {label: '心情随笔', value: '心情随笔',},
        ],
        isPassed: [
          {label: '全部', value: 0,},
          {label: '已审核', value: 1,},
          {label: '未审核', value: 2,},
        ]
      }
  }},
  methods: {
    view (id) {
      this.$router.push({path: '/article', query: {articleId: id}})
    },
    set (id, val) {
      api.passArticle({
        token: this.$store.state.token,
        pass: val ? 0 : 1,
        articleId: id
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.pageChange()
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    del (id) {
      api.aDeleteArticle({
        token: this.$store.state.token,
        articleId: id
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.pageChange()
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.pageChange()
      // console.log(`current page: ${val}`)
    },
    pageChange () {
      api.manageArticles({
        token: this.$store.state.token,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage,
        category: this.page.categoryVal,
        isPassed: this.page.isPassedVal
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.articleList = res.data.articleList
          this.page.pageSize = res.data.pageSize
          this.page.currentPage = res.data.currentPage
          this.page.num = res.data.pageNum * res.data.pageSize
          // console.log(this.page)
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  },
  mounted () {
    this.pageChange()
  },
  computed: {
    sel1 () {
			return this.page.categoryVal
		},
    sel2 () {
			return this.page.isPassedVal
		}
  },
  watch: {
    sel1 () {
      this.pageChange()
    },
    sel2 () {
      this.pageChange()
    }
  }
}
</script>

<style scoped>

</style>
